import React, { useState } from 'react';
import { Button, Card, Input, List, Avatar } from 'antd';
import { CustomerServiceOutlined, CloseOutlined, SendOutlined } from '@ant-design/icons';
import styles from './AIChat.module.less';

interface ChatMessage {
  type: 'user' | 'bot';
  content: string;
  time: string;
}

const AIChat: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      type: 'bot',
      content: '您好！我是智能客服助手，请问有什么可以帮您？',
      time: new Date().toLocaleTimeString()
    }
  ]);

  const handleSend = async () => {
    if (!inputValue.trim()) return;

    const userMessage: ChatMessage = {
      type: 'user',
      content: inputValue,
      time: new Date().toLocaleTimeString()
    };

    setMessages([...messages, userMessage]);
    setInputValue('');

    // 模拟机器人回复
    setTimeout(() => {
      const botMessage: ChatMessage = {
        type: 'bot',
        content: '您的问题已收到，我正在思考如何回答...',
        time: new Date().toLocaleTimeString()
      };
      setMessages(prev => [...prev, botMessage]);
    }, 1000);
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className={styles.aiChat}>
      <Button
        type="primary"
        shape="circle"
        size="large"
        className={styles.toggleButton}
        icon={<CustomerServiceOutlined />}
        onClick={() => setIsOpen(!isOpen)}
      />

      {isOpen && (
        <Card
          className={styles.chatWindow}
          title={
            <div className={styles.chatHeader}>
              <CustomerServiceOutlined /> 智能客服
              <CloseOutlined className={styles.closeButton} onClick={() => setIsOpen(false)} />
            </div>
          }
        >
          <List
            className={styles.messageList}
            itemLayout="horizontal"
            dataSource={messages}
            renderItem={item => (
              <List.Item className={item.type === 'user' ? styles.userMessage : styles.botMessage}>
                <div className={styles.messageWrapper}>
                  <Avatar
                    icon={item.type === 'user' ? '我' : <CustomerServiceOutlined />}
                    className={item.type === 'user' ? styles.userAvatar : styles.botAvatar}
                  />
                  <div className={styles.messageContent}>
                    <div className={styles.text}>{item.content}</div>
                    <div className={styles.time}>{item.time}</div>
                  </div>
                </div>
              </List.Item>
            )}
          />

          <div className={styles.inputArea}>
            <Input.TextArea
              value={inputValue}
              onChange={e => setInputValue(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="请输入您的问题..."
              autoSize={{ minRows: 1, maxRows: 3 }}
            />
            <Button
              type="primary"
              icon={<SendOutlined />}
              onClick={handleSend}
              disabled={!inputValue.trim()}
            >
              发送
            </Button>
          </div>
        </Card>
      )}
    </div>
  );
};

export default AIChat;
